<template>
  <div class="myChart" ref="myChart"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
const myChart = ref(null);
onMounted(() => {
  let ECharts = echarts.init(myChart.value);
  let option = {
    grid: {
      x: 45,
      y: 70,
      x2: 20,
      y2: 40,
      containLable: true,
    },
    title: {
      text: "库存统计图",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
    },
    legend: {
      top: 35,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期7"],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "服饰",
        type: "bar",
        data: [320, 502, 401, 334, 390, 430, 720],
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "数码",
        type: "bar",
        data: [234, 564, 443, 234, 754, 430, 321],
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "家电",
        type: "bar",
        data: [220, 321, 335, 534, 390, 330, 310],
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "家具",
        type: "bar",
        data: [269, 212, 491, 368, 341, 330, 410],
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "日化",
        type: "bar",
        data: [820, 832, 901, 934, 1290, 1330, 1320],
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
      },
    ],
  };
  ECharts.setOption(option);
});
</script>


<style lang="less" scoped>
.myChart {
  height: 21rem;
  border: 1px solid blue;
  margin: 1.25rem;
  background-color: rgba(12, 130, 255, 0.65);
  padding-top: 1.8rem;
}
</style>